4.7 Appendix G: Payments Page Checkout & Saved Card Payments

• 4.7.1 Default Credit Card Payment Page
• 4.7.2 View Order Pop-Up
• 4.7.3 Paymemt Methods
• 4.7.4 Terms and Conditions
• 4.7.5 Card Capture Details
• 4.7.6 Save Card Alias Name
• 4.7.7 3D Secure Check
• 4.7.8 Processing Screen – Animated Vodacom Logo
• 4.7.9 Save Card Payment Page (with a previously saved card)
• 4.7.10 Using Saved Card (capture of CVV details only)
• 4.7.11 Edit Saved Card (can only delete a saved card)
• 4.7.12 Delete Saved Card

The following UX screen–captures depict the desktop browser journeys.
The UX will adapt to a mobile device UX when required.

4.7.1 Default Credit Card Payment Page

The default credit–card payment page allows for the capture of a credit card for payment.
You can also view the order details by selecting View Order; change the Payment Method from the drop-down.

4.7.2 View Order Pop-Up

The "VIEW ORDER" pop-up from the payments page, allows you to see the merchants details of the
products being ordered, and the merchant order reference number.

4.7.3 Payment Methods

The "Payment Method" drop-down lists shows the list of available payment methods that have been made
available to the merchant when they were on-boarded onto the payment gateway.

4.7.4 Terms and Conditions

The scrolling list of Terms and Conditions and Privacy Policy are viewable from the payment page.

4.7.5 Card Capture Details

When capturing credit–card details, the customer must capture the name on their credit card;
the full credit-card number (PAN); the expiry–date and the verification number
(CVV - 3 digit for VISA or Mastercard or 4 digit for American Express cards).
The expiry–date field will automatically insert a slash between the month and year fields.

4.7.6 Save Card Alias Name

If the customer chooses to "Save this card" (and a unique merchant and customer reference number
is passed to the payment page, and the merchant has been enabled for Save Card functionality),
they then have the option of creating an Alias name for this card (to allow them to differentiate
between multiple saved cards). If no alias is specified then the masked PAN is used for the alias.

4.7.7 3D Secure Check

The 3D Secure check (or One–Time Password [OTP] check) UX will differ depending on the acquiring bank to which the merchant has been setup.
The OTP for ABSA test cards is test123.
Nedbank test cards are set to auto-approve.

4.7.8 Processing Screen – Animated Vodacom Logo

In–between payment and 3D secure screens, and while awaiting verification of
payment fromthe bank the payments page show an animated Vodacom logo page.
The customer should not close their browser during this period,
otherwise the transaction will be abandoned with error.

4.7.9 Save Card Payment Page (with a previously saved card)

In order for a merchant's saved cards to appear for a customer on the payment checkout page, the merchant must:
• Be setup for the Save Card journey during the on-boarding process
• Use a consistent and unique merchant identifier provided by the payment gateway
• Use a consistent and unique customer identifier from their own system

If a company group merchant wishes to utilise saved cards across different sub&ndashmerchants within their organisation then the following must also be applied:
• The Supplier Group must be set to the same value for all merchants within that organisation during the on&ndashboarding process (i.e. Vodacom PTY, MassMart etc). This value then overrides any individual merchant identifiers.
• Use a consistent and unique customer identifier across ALL sub–merchants within the organisation from their systems single–view&ndashof&ndashcustomer (i.e. different sub–merchants within that organisation should not have their own customer identifier, otherwise they are treated as distinct entities)

If the customer has a previously saved card for this merchant (and a unique merchant and customer reference number is passed to the payment page, and the merchant has been enabled for Save Card functionality), then they will be shown previously saved cards on the payment page, which they can use to pay by simply capturing the card CVV.

4.7.10 Using Saved Card (capture of CVV details only)

Using a previously saved card, the customer has simply to enter the verification
number (CVV) of their card and press Pay.

4.7.11 Edit Saved Card (can only delete a saved card)

If the customer chooses to "Edit" their saved, they are given the option to
delete one or more of the previously saved cards.

4.7.12 Delete Saved Card

If the customer chooses to delete a saved card, they will be asked to confirm
that delete before the card is actually removed from this merchant/customer profile.

Continue

• Continue to 4.8 Appendix H: Webhook Example Templates & Return Data

Return

• Return to 4.6 Appendix F: XML Schema Definition
• Return to 4 Appendices
• Return to 3. Implementation Steps
• Return to 1. Contents